<template>
  <div class="order">
      <h4>运输管理>已分配运单</h4>
      <div class="filter-box" style="padding: 30px;
            background: #fff;
            border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0">
                <div>
                        <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                            订单编号：
                            <el-input clearable
                                v-model="orderNum" class="filter-input"
                                 @keyup.enter.native="searchOrder()">
                            </el-input>
                        </div>
                       <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                            出发站点：
                            <el-select clearable v-model="startSite" placeholder="请选择">
                                        <el-option
                                        v-for="item in siteSelected"
                                        :key="item.value"
                                        :label="item.siteName"
                                        :value="item.id">
                                        </el-option>
                             </el-select>
                        </div>
                         <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                            <span style="display:inline-block;margin-right:12px;line-height: 32px;"> 地区：</span>  
                            <area-select :level="2" v-model="selected" :data="$pcaa" style="display:inline-block;"></area-select> 
                        </div>
                        <el-button type="primary" @click="searchOrder()">搜索</el-button>
                   </div>
       </div>  
       <div class="container" style="border-radius: 0 0 5px 5px ">
             <!-- <el-button size="mini" type="primary" @click="batchHandle()">批量操作</el-button>              -->
             <el-table v-loading="loading" :data="data" border style="margin-top:20px;" ref="multipleTable" stripe
                      @selection-change="select" fit>
                 <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                 <el-table-column type="index"  width="80" label="序号" align="center" :index="indexMethod"></el-table-column>
                 <el-table-column prop="orderId" label="订单编号" width="260" align="center"></el-table-column>
                 <el-table-column prop="startSite" label="出发站点" align="center" width="160">
                </el-table-column>
                 <el-table-column prop="endLocation" label="目的地" align="center" width="150px" show-overflow-tooltip >
                </el-table-column>
                <el-table-column prop="createOrderTime" label="下单时间" align="center" fit show-overflow-tooltip >
                    </el-table-column>
                 <el-table-column prop="caseNum" label="数量" align="center" width="240">
                </el-table-column>
                <el-table-column prop="transUserName" label="运输员" width="260" align="center"></el-table-column>
                <el-table-column prop="transUserTel" label="运输员手机号" width="260" align="center"></el-table-column>
                <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                    <span @click="allot( scope.row.id )" style="color:blue">重新分配</span>             
                </template>
                </el-table-column>
            </el-table>
             <div class="pagination">
                <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="getPageNum"
                    :page-sizes="[10, 20, 50,100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                 </el-pagination>
           </div>
      </div>
      <!-- 分配运输员的模态框 -->
      <el-dialog title="分配运输员" :visible.sync="dialogFormVisible" width="30%" top="30vh">
        <el-form :model="form" :rules="rules" ref="trans_form">
            <el-form-item prop="region" label="选择司机" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="请选择司机">
                    <el-option v-for="item in  transList"  :label="item.realName" :value="item.id" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveTrans('trans_form')">确 定</el-button>
        </div>
     </el-dialog>
  </div>
</template>

<script>
import {
  ordering,
  transUserList,
  order_trans,
  getSiteAll,
  alreayOrderList,
  againDelliver
} from "@/request/api";
import { AreaSelect } from "vue-area-linkage";
export default {
  data() {
    return {
      loading: true,
      data: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      orderNum: "", // 订单编号
      startSite: "", //  出发站点
      siteSelected: [],
      distSite: "", //  目的地
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {
        region: ""
      },
      batchArr: [], // 批量操作的数组
      transList: [], // 查询运输员列表
      orderFarmerId: "",
      isBatch: false, // 是否是批量操作
      rules: {
        region: [{ required: true, message: "请选择司机", trigger: "change" }]
      },
      selected: []
    };
  },
  created() {
    this.getOrdering();
    getSiteAll().then(res => {
      console.log(res);
      if (res.code == 1) {
        this.siteSelected = res.data;
      }
    });
  },
  methods: {
    indexMethod(index) {
      return index + 1 + (this.pageNum - 1) * pageSize;
    },
    // 当前页
    getPageNum(e) {
      this.pageNum = e;
      this.getOrdering();
    },
    // 当前页的条数
    handleSizeChange(e){
      this.pageSize = e;
      this.getOrdering();
    },
    // batchHandle() {
    //   this.isBatch = true; //  批量操作
    //   if (this.batchArr.length == 0) {
    //     alert("请选择一项");
    //   } else {
    //     this.dialogFormVisible = true;
    //     this.getSelectTrans();
    //   }
    // },
    // 点击重新分配
    allot(id) {
      this.dialogFormVisible = true;
      this.getSelectTrans();
      this.orderFarmerId = id;
      this.isBatch = false; // 不是批量
    },
    select(selection, row) {
      this.batchArr = selection.map(v => {
        return v.id;
      });
    },
    getOrdering() {
      // ordering({
      //   orderId: this.orderNum,
      //   siteId: this.startSite,
      //   districtId: this.selected[2],
      //   pageNum: this.pageNum,
      //   pageSize: this.pageSize
      // }).then(res => {
      //   this.data = res.rows;
      //   this.total = res.total;
      //   this.loading = false;
      //   console.log(res);
      // });
      alreayOrderList({
        orderId: this.orderNum,
        siteId: this.startSite,
        districtId: this.selected[2],
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.data = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    getSelectTrans() {
      transUserList().then(res => {

        this.transList = res.data;
      });
    },
    // 点击运输员里面的确定
    saveTrans(formName) {
      this.$refs[formName].validate(valid => {
        //分配司机
        if (valid) {
          if (this.isBatch) {
            order_trans({
              orderFarmerId: this.batchArr.join(","),
              transUserId: this.form.region
            }).then(res => {
              console.log(3,res);
              if (res.code == 1) {
                this.$message({
                  type: "success",
                  message: "分配成功"
                });
                this.dialogFormVisible = false;
                this.orderFarmerId = "";
                this.getOrdering();
              }
            });
          } else {
            order_trans({
              orderFarmerId: this.orderFarmerId,
              transUserId: this.form.region
            }).then(res => {
              console.log(res);
              if (res.code == 1) {
                this.$message({
                  type: "success",
                  message: "分配成功"
                });
                this.dialogFormVisible = false;
                this.orderFarmerId = "";
                this.getOrdering();
              }
            });
          }
        }
      });
    },
    searchOrder() {
      this.getOrdering();
    }
  },
  components: {
    AreaSelect
  }
};
</script>
<style  scoped>
.order > h4 {
  line-height: 22px;
  border-left: 5px solid rgb(32, 160, 255);
  font-size: 16px;
  color: #666;
  padding-left: 10px;
  font-size: 18px;
  margin-bottom: 20px;
}
.handle-box {
  margin-bottom: 20px;
}
.filter-input {
  width: 200px;
  display: inline-block;
}
</style>